<script setup lang="ts">
import { BaseApi } from "@/apis/base.api";
import { UtilTool } from "@webxue/common";
import useForm from "@/hooks/useForm";
import useCusRouter from "@/hooks/useCusRouter";
import EventEmitTool from "@/utils/tools/event-emit.tool";
import { useWebxRouteTabs } from "@webxue/vue3-antdv-ui";
import { reactive } from "vue";
import { message } from "ant-design-vue";

// 获取路由属性
const { router, routeQuery } = useCusRouter({
  queryKeys:[
    // 应用id
    "devAppId",
    // 是否只读
    "readonly"
  ]
});
const { addParentTab } = useWebxRouteTabs({ router });
// 获取详情hook
const { detailInfo, formRef, formState, onValidateFields, getFormRules } = useForm({
  // 获取表单数据
  formState: {} as Record<string, any>,
  // 获取详情数据
  async onInit() {
    if (!routeQuery.value.devAppId) return false;
    const response = await BaseApi.devApp.find({ id: routeQuery.value.devAppId });
    // 回显应用信息
    formState.value = UtilTool.lodash.cloneDeep(response.data);
    return Promise.resolve(response);
  },
  // 表单校验成功回调
  async onValidateSuccess(values) {
    // 响应结果
    let response: Partial<ResponseData> = {};
    // 请求参数
    const requestBody: Record<string, any> = {
      name: values.name,
      description: values.description,
    };
    if (routeQuery.value.devAppId) {
      // 编辑
      response = await BaseApi.devApp.update({
        ...requestBody,
        id: routeQuery.value.devAppId
      });
    } else {
      // 新增
      response = await BaseApi.devApp.save({
        ...requestBody
      });
    }
    if(response.success) {
      addParentTab();
    }
  }
});
// form数据
const devAppData = reactive({
  copyAppKey(){
    UtilTool.copyToClip([detailInfo.value.appKey]);
    message.success("appKey复制成功");
  }
})

// form保存回调
EventEmitTool.on("FORM:SAVE", () => {
  // 开始校验
  onValidateFields();
});
</script>

<template>
  <div>
    <WebxForm ref="formRef" :model="formState" :readonly="!!routeQuery.readonly">
      <div class="flex flex-col gap-2">
        <WebxCard :titleProps="{ title:'开发者应用' }">
          <ARow class="px-2 pb-4" :gutter="[0, 10]">
            <ACol :span="8">
              <WebxFormItem label="应用名称" name="name" :rules="[{ required: true, message:'请输入应用名称' }]">
                <AInput v-model:value="formState.name" placeholder="请输入应用名称" />
                <template #readonly>{{ formState.name }}</template>
              </WebxFormItem>
            </ACol>
            <ACol :span="8" v-if="!!routeQuery.readonly">
              <WebxFormItem label="应用Key" name="appKey">
                <div></div>
                <template #readonly>
                  <AInputGroup compact>
                    <AInputPassword v-model:value="detailInfo.appKey" placeholder="请输入appKey" readonly style="width: calc(100% - 88px)" />
                    <AButton type="primary" @click="devAppData.copyAppKey">一键复制</AButton>
                  </AInputGroup>
                </template>
              </WebxFormItem>
            </ACol>
            <ACol :span="24">
              <WebxFormItem label="应用描述" name="description">
                <ATextarea v-model:value="formState.description" placeholder="请输入应用描述" :autoSize="{ minRows: 4, maxRows: 4 }" />
                <template #readonly>{{ formState.description }}</template>
              </WebxFormItem>
            </ACol>
          </ARow>
        </WebxCard>
      </div>
    </WebxForm>
  </div>
</template>

<style scoped lang="less">
.ant-form-item {
  margin-bottom: 0;
  :deep(.ant-form-item-label){
    width: 120px;
  }
}
</style>
